.background-image(@url){
    background-image: url(@url);
    background-repeat: no-repeat;
    background-position: center center;
    // background-size: contain;
    background-size: 100% 100%;
}
.px2px(@name, @px){
    @{name}: round(@px / 2) * 1px;
    [data-dpr="2"] & {
        @{name}: @px * 1px;
    }
    // for mx3
    [data-dpr="2.5"] & {
        @{name}: round(@px * 2.5 / 2) * 1px;
    }
    // for 小米note
    [data-dpr="2.75"] & {
        @{name}: round(@px * 2.75 / 2) * 1px;
    }
    [data-dpr="3"] & {
        @{name}: round(@px / 2 * 3) * 1px
    }
    // for 三星note4
    [data-dpr="4"] & {
        @{name}: @px * 2px;
    }
}
html {
    font-family: "Microsoft Yahei"
}
html, body, main, section, div, p {
  margin: 0;
  padding: 0;
}
main {
  // display: flex;
  // flex-direction: row;
  // // flex-flow: row || wrap;
  // flex-wrap: wrap;
  // justify-content: space-around;
  section {
    width: 300/75rem;
    margin-top: 1rem;
    margin-left: 50/75rem;
    float: left;
    color: #fff;
  }
  .container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    text-align: center;
  }
  .flag {
    .px2px(font-size, 48)
  }
  .wind_dir {
    height: 7rem;
    background-color: rgb(241, 122, 144);
    // margin-top: 1rem;
  }
  .wind_pow {
    height: 7.5rem;
    background-color: rgb(120, 188, 175);
  }
  .temp {
    height: 7.3rem;
    margin-top: 0.3rem;
    background-color: rgb(49, 100, 127);
  }
  .hum {
    height: 6.5rem;
    background-color: rgb(236, 195, 79);
  }
}
